import * as React from 'react';
import { StyleSheet, View, Dimensions, Text } from 'react-native';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import SwiperFlatList from 'react-native-swiper-flatlist';
const { width, height } = Dimensions.get('window');
const colors = ['tomato', 'thistle', 'skyblue', 'teal'];
export default () => {
    const swiperData = [
        { id: '1', title: '第一页', backgroundColor: 'tomato' },
        { id: '2', title: '第二页', backgroundColor: 'skyblue' },
        { id: '3', title: '第三页', backgroundColor: 'gold' },
        { id: '4', title: '第四页', backgroundColor: 'pink' },
    ];

    const renderSwiperItem = ({ item }) => (
        <View style={[styles.slide, { backgroundColor: item.backgroundColor }]}>
            <Text style={styles.slideText}>{item.title}</Text>
        </View>
    );

    return (
        <Tester>
            <TestSuite name="SwiperFlatList测试">
                <TestCase itShould="基础水平轮播 SwiperFlatList vertical= {false} ">
                    <View style={styles.testContainer}>
                        <SwiperFlatList
                            data={swiperData}
                            renderItem={renderSwiperItem}
                            vertical={false}
                            showPagination={true}
                            autoplay
                            //当没有该属性时 会拿取当前整个屏幕的宽与高 影响滑动阈值判断
                            getItemLayout={(data, index) => ({
                                length: styles.testContainer.height,  // 每个项目的固定高度
                                offset: styles.testContainer.height * index,  // 累计偏移量 = 高度 × 索引
                                index: index,
                            })}
                        />
                    </View>
                </TestCase>
                <TestCase itShould="基础垂直轮播 SwiperFlatList vertical={true}">
                    <View style={styles.testContainer}>
                        <SwiperFlatList
                            data={swiperData}
                            renderItem={renderSwiperItem}
                            vertical={true}
                            showPagination={true}
                            autoplay
                            getItemLayout={(data, index) => ({
                                length: styles.testContainer.height,
                                offset: styles.testContainer.height * index,
                                index: index,
                            })}
                        />
                    </View>
                </TestCase>
            </TestSuite>
        </Tester>
    );
};

const styles = StyleSheet.create({
    testContainer: {
        width: width * 0.7,
        height: height * 0.3,
        alignSelf: 'center',
        borderColor: '#ddd',
        borderRadius: 10,
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: height * 0.3,
        width: width * 0.7,
    },
    slideText: {
        fontSize: 24,
        color: 'white',
        fontWeight: 'bold',
    },
});

